<template>
  <div class='index'>
    <!-- 频道列表 -->
    <!-- vant提供的tab标签滚动栏 -->
    <!-- // v-model用来获取当前是哪一个频道id。它与van-tab中的name属性一起工作  -->
    <van-tabs v-model="channelId">
      <van-tab v-for="channel in channels" :title="channel.name" :key="channel.id" :name="channel.id">
        <!-- 频道内容 {{ channel.name }} --><!-- 文章列表 -->
        <!-- 频道与文章列表是一一对应的。每个频道都需要有一个文章列表组件。
            article-list写在了v-for中，则每次循环都会生成一个文章列表组件。
            van-tab具有类似于 懒加载的效果： 只有激活了当前的tab，才会去创建文章列表组件
            监听子组件article-list传出来的showMoreAction事件-->
        <article-list :channel="channel" @showMoreAction="hShowMoreAction"></article-list>
        <!-- // 文章列表是公用的，也就是放在v-for里面 每个频道栏都可以加载  所以父组件需要传值给文章列表组件
        告诉他当前是什么频道-->
      </van-tab>
    </van-tabs>
    <!-- 频道管理列表 开关 通过定位 -->
    <div v-if="$store.getters.isLogin" class="bar-btn" @click="showChannelEdit=true">
        <van-icon name="wap-nav"/>
    </div>
        <!-- 文章---更多操作 -->
        <!-- moreAction组件只有当van-popup显示时，才会去创建 -->
    <van-popup  v-model="showMoreAction" :style="{ width: '80%' }">
      <more-action @dislike="hDislike"  @report="hReport" ref="refMoreAction"></more-action>
    </van-popup>
    <!-- https://vant-contrib.gitee.io/vant/#/zh-CN/action-sheet -->
    <van-action-sheet v-model="showChannelEdit" title="频道管理">
      <!-- 1. 父传子。把当前订阅频道传给 频道编辑组件
      2. @updateCurChannel="hUpdateCurChannel"监听子组件回传的事件
      :channelId="channelId"把当前频道id传入子组件 设置特殊的类来标识这个当前频道
      hUpdateCurIndex当用户频道管理删除时，判断是否更新频道列表显示 暂时做不出来-->
      <channel-edit :channels="channels" :channelId="channelId" @updateCurChannel="hUpdateCurChannel"
      @updateCurIndex="hUpdateCurIndex"></channel-edit>
    </van-action-sheet>
  </div>
</template>

<script>
// 调用频道操作的封装函数获取数据进行频道栏渲染
import { getChannels } from '@/api/channel'
// 导入文章列表的组件
import ArticleList from './articleList'
// 引入文章的共用反馈组件
import MoreAction from './moreAction.vue'
// 引入操作文章列表的函数
import { dislikeArticle, reportArticle } from '@/api/article.js'
// 引入频道管理组件
import ChannelEdit from './channelEdit'
export default {
  name: 'home-index',
  components: {
    // 注册组件
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  data () {
    return {
      channels: [], // 频道栏
      articleId: null, // 当前要执行更多操作的 文章编号 子组件传递的文章编号
      channelId: '', // 表示当前选择中频道的编号
      showChannelEdit: false, // 是否显示频道编辑弹层
      showMoreAction: false // 是否显示更多操作弹层
    }
  },
  created () {
    this.loadChannels() // 创建后获取频道栏数据 可能会有401 很可能是token出错了 后面会做处理
  },
  methods: {
    // 处理子组件channelEdit中用户在我的频道上点击的动作
    // 1 . 关闭 我的频道 弹层
    // 2 . 切换频道列表到 当前频道上去
    hUpdateCurChannel (channel) {
      console.log('处理子组件channelEdit中用户在我的频道上点击的动作', channel)
      // 1 . 关闭 我的频道 弹层
      this.showChannelEdit = false
      // 2 . 切换频道列表到 当前频道上去
      this.channelId = channel.id
    },
    async loadChannels () {
      const result = await getChannels()
      console.log(result)
      this.channels = result.data.data.channels
    },
    // 处理子组件中抛出的：显示更多操作 的弹层
    hShowMoreAction (articleId) {
      console.log('收到从子组件中传递的文章编号', articleId)
      // 保存文章编号
      this.articleId = articleId
      // 显示弹层
      this.showMoreAction = true
      // 问题 从第二个状态关闭 下次打开还是第二状态
      // 从父组件去修改子组件数据项 在父组件中获取子组件的引用，并直接修改子组件数据
      console.log(this.$refs.refMoreAction)
      if (this.$refs.refMoreAction) {
        this.$refs.refMoreAction.isReport = false
      }
    },
    delArticle () {
    // 通过事件总线去发布一个消息，告诉articleList组件，去删除对应的文章
    // 参数是：当前要删除的文章编号 及当前的频道编号
      const eventObj = {
        articleId: this.articleId,
        // channelId: this.channels[this.activeIndex].id
        channelId: this.channelId
      }
      // console.log(eventObj)
      this.$eventBus.$emit('delArticle', eventObj)
    },
    // 处理用户在弹层中选择的 不感兴趣
    async hDislike () {
      // console.log('从子组件收到，不感兴趣！此时要操作的文章编号是', this.articleId)
      // // 1. 调用后端接口
      // const result = await dislikeArticle(this.articleId)
      // console.log(result)
      // // 2. 退出弹层
      // this.showMoreAction = false

      // 3. 把用户点击的那个文章删除掉
      // 难点：当前用户删除不感兴趣的数据 但是数据库不能删除别人可能要看  后端做我们只需要本地做
      // 当前频道删除这个文章id号 如果我们开了很多tab组件可能其他频道也有这个id号的其他文章 其他的不能删除所以需要
      // 解决
      // eventBus  当前父组件发布消息要做删除 当前对事件进行触发（发布事件） 当前所有子组件都要监听检测是否需要删除
      // 监听事件 发布事件  所有子组件created时进行处理 （监听事件）
      // 在父组件index.vue中发布事件
      // const obj = {
      //   articleId: this.articleId, // 当前的文章编号
      //   channelId: this.channelId // 当前频道id
      // }
      // this.$eventBus.$emit('delArticle', obj) // 发布事件 需要在所有子组件articlelist进行监听
      try {
        // 1. 调用后端接口
        const result = await dislikeArticle(this.articleId)
        console.log(result)
        // 2. 退出弹层
        this.showMoreAction = false
        // 3. 通知文章列表去删除那个被点击的文章
        this.delArticle()
        this.$toast.success('操作成功')
      } catch (e) {
        this.$toast.fail('操作失败')
      }
    },
    async hReport (reportTypeId) {
      console.log('父组件收到举报的类型是', reportTypeId)
      // 1. 调用后端接口
      const result = await reportArticle(this.articleId, reportTypeId)
      console.log(result)
      // 2. 退出弹层
      this.showMoreAction = false
      // 3. 通知文章列表去删除那个被点击的文章
      this.delArticle()
    },
    // 解决删除我的频道时，出现的小bug
    hUpdateCurIndex (idx) {
      console.log(idx)
      this.channelId = this.channels[idx].id
      // this.channelId = this.channels[idx]
    }
  }
}
</script>

<style scoped lang='less'>
// 频道管理的开关按钮
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }
</style>
